import { connect } from "react-redux";

// actionTypes
const TOOGLE_SIDER_BAR = "TOOGLE_SIDER_BAR";
const TAB_ADD = "TAB_ADD";
const TAB_CLICK = "TAB_CLICK";
const TAB_CLOSE = "TAB_CLOSE";

// actions
const TOOGLE_SIDER_BAR_ACTION = {
  type: TOOGLE_SIDER_BAR
};
const TAB_ADD_ACTION = function(tabPanel) {
  return { type: TAB_ADD, tabPanel };
};

const TAB_CLICK_ACTION = function(tabPanelKey) {
  return { type: TAB_CLICK, tabPanelKey };
};

const TAB_CLOSE_ACTION = function(tabPanelKey, actionType) {
  return {
    type: TAB_CLOSE,
    tabPanelKey,
    actionType
  };
};
// reducers

const initState = {
  collapsed: false,
  activeTabKey: "0",
  contentTabPanes: []
};

const HomeReducer = (state = initState, action) => {
  switch (action.type) {
    case TOOGLE_SIDER_BAR:
      const { collapsed } = state;
      return Object.assign({}, state, { collapsed: !collapsed });
    case TAB_ADD:
      debugger;
      const { contentTabPanes } = state;
      const newPanels = contentTabPanes.slice(0);

      var newActiveKey = action.tabPanel.id;
      // 判断是否存在
      if (
        JSON.stringify(newPanels).indexOf(JSON.stringify(action.tabPanel)) ===
        -1
      ) {
        newPanels.push(action.tabPanel);
      }

      // 数组数据增加一定是 这种方式，直接 push 无效

      return Object.assign({}, state, {
        contentTabPanes: [...newPanels],
        activeTabKey: newActiveKey
      });

    case TAB_CLICK:
      debugger;
      return Object.assign({}, state, {
        activeTabKey: action.tabPanelKey
      });

    case TAB_CLOSE:
      debugger;
      if (action.actionType === "remove") {
        var tabIndex = 0;
        var closeTabIndex = 0;
        var actionKey = "";
        const newPanels = state.contentTabPanes.filter(item => {
          tabIndex++;
          if (item.id !== action.tabPanelKey) {
            return true;
          } else {
            closeTabIndex = tabIndex;
            return false;
          }
        });

        if (state.activeTabKey === action.tabPanelKey) {
          if (closeTabIndex - 1 >= newPanels.length) {
            if (newPanels.length > 0) {
              actionKey = newPanels[newPanels.length - 1].id;
            }
          } else {
            actionKey = newPanels[closeTabIndex - 1].id;
          }
        } else {
          actionKey = state.activeTabKey;
        }

        return Object.assign({}, state, {
          activeTabKey: actionKey,
          contentTabPanes: [...newPanels]
        });
      }
      return state;
    default:
      return state;
  }
};

const mapState = state => ({
  collapsed: state.HomeReducer.collapsed,
  contentTabPanes: state.HomeReducer.contentTabPanes,
  activeTabKey: state.HomeReducer.activeTabKey
});
const mapDisptch = (dispatch, ownpros) => ({
  toggle: () => dispatch(TOOGLE_SIDER_BAR_ACTION),
  addTab: tabPanel => dispatch(TAB_ADD_ACTION(tabPanel)),
  onTabClick: tabPanelKey => dispatch(TAB_CLICK_ACTION(tabPanelKey)),
  onTabClose: (tabPanelKey, action) =>
    dispatch(TAB_CLOSE_ACTION(tabPanelKey, action))
});

const HomeConnect = connect(
  mapState,
  mapDisptch
);

export { HomeReducer, HomeConnect };
